<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
    <div class="container mx-auto px-4 py-8">
      <!-- 页面标题 -->
      <div class="mb-8 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-orange-600 to-red-600 rounded-2xl mb-4 shadow-lg">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <h1 class="text-4xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent mb-2">审核管理</h1>
        <p class="text-gray-600 text-lg">审核用户提交的项目和题目</p>
      </div>

      <!-- 统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 transform hover:scale-105 border border-white/20">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-12 h-12 bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600">待审核项目</p>
              <p class="text-3xl font-bold text-gray-900">{{ stats.pendingProjects }}</p>
            </div>
          </div>
        </div>

        <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 transform hover:scale-105 border border-white/20">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600">待审核题目</p>
              <p class="text-3xl font-bold text-gray-900">{{ stats.pendingQuestions }}</p>
            </div>
          </div>
        </div>

        <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 transform hover:scale-105 border border-white/20">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600">今日已审核</p>
              <p class="text-3xl font-bold text-gray-900">{{ stats.todayReviewed }}</p>
            </div>
          </div>
        </div>

        <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 transform hover:scale-105 border border-white/20">
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                </svg>
              </div>
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600">审核通过率</p>
              <p class="text-3xl font-bold text-gray-900">{{ stats.approvalRate }}%</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 标签页 -->
      <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-white/20 mb-8">
        <div class="border-b border-gray-200/50">
          <nav class="flex space-x-8 px-6" aria-label="Tabs">
            <button
              v-for="tab in tabs"
              :key="tab.id"
              @click="() => { activeTab = tab.id; handleTabChange() }"
              :class="[
                'py-4 px-1 border-b-2 font-medium text-sm transition-colors',
                activeTab === tab.id
                  ? 'border-orange-500 text-orange-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              ]"
            >
              {{ tab.name }}
              <span
                v-if="tab.count > 0"
                :class="[
                  'ml-2 py-0.5 px-2 rounded-full text-xs font-medium',
                  activeTab === tab.id
                    ? 'bg-orange-100 text-orange-600'
                    : 'bg-gray-100 text-gray-600'
                ]"
              >
                {{ tab.count }}
              </span>
            </button>
          </nav>
        </div>

        <!-- 项目审核 -->
        <div v-if="activeTab === 'projects'" class="p-6">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-lg font-semibold text-gray-900">待审核项目</h3>
            <div class="flex space-x-3">
              <select
                v-model="projectFilter"
                @change="loadProjects"
                class="bg-white/80 backdrop-blur-sm text-sm rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-orange-500/30 border border-gray-200/50"
              >
                <option value="all">所有类型</option>
                <option value="web">Web项目</option>
                <option value="mobile">移动应用</option>
                <option value="desktop">桌面应用</option>
                <option value="other">其他</option>
              </select>
              <button
                @click="loadProjects"
                class="px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
              >
                刷新
              </button>
            </div>
          </div>

          <!-- 加载状态 -->
          <div v-if="projectsLoading" class="flex justify-center items-center py-12">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-500"></div>
            <span class="ml-3 text-gray-600">加载中...</span>
          </div>

          <!-- 项目列表 -->
          <div v-else-if="projects.length > 0" class="space-y-4">
            <div
              v-for="project in projects"
              :key="project.id"
              class="bg-white/90 backdrop-blur-sm rounded-xl border border-gray-200/50 shadow-sm hover:shadow-md transition-all duration-200"
            >
              <div class="p-6">
                <div class="flex items-start justify-between">
                  <div class="flex-1">
                    <div class="flex items-center space-x-3 mb-3">
                      <h4 class="text-lg font-semibold text-gray-900">{{ project.title }}</h4>
                      <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">
                        {{ project.type }}
                      </span>
                      <span class="px-2 py-1 bg-gray-100 text-gray-800 text-xs font-medium rounded-full">
                        {{ project.difficulty }}
                      </span>
                    </div>
                    <p class="text-gray-600 mb-4">{{ project.description }}</p>
                    <div class="flex items-center space-x-6 text-sm text-gray-500">
                      <div class="flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        {{ project.author.username }}
                      </div>
                      <div class="flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        {{ formatTime(project.created_at) }}
                      </div>
                      <div class="flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        {{ project.tech_stack?.join(', ') || '未指定' }}
                      </div>
                    </div>
                  </div>
                  <div class="flex space-x-2 ml-4">
                    <button
                      @click="auditProject(project.id, 'approve')"
                      class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
                    >
                      通过
                    </button>
                    <button
                      @click="showRejectModal(project)"
                      class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
                    >
                      拒绝
                    </button>
                    <button
                      @click="viewProjectDetail(project)"
                      class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
                    >
                      查看详情
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-else class="text-center py-12">
            <div class="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
              <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">暂无待审核项目</h3>
            <p class="text-gray-500">所有项目都已审核完成</p>
          </div>
        </div>

        <!-- 题目审核 -->
        <div v-if="activeTab === 'questions'" class="p-6">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-lg font-semibold text-gray-900">待审核题目</h3>
            <div class="flex space-x-3">
              <select
                v-model="questionFilter"
                @change="loadQuestions"
                class="bg-white/80 backdrop-blur-sm text-sm rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-orange-500/30 border border-gray-200/50"
              >
                <option value="all">所有难度</option>
                <option value="Easy">简单</option>
                <option value="Medium">中等</option>
                <option value="Hard">困难</option>
              </select>
              <button
                @click="loadQuestions"
                class="px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
              >
                刷新
              </button>
            </div>
          </div>

          <!-- 加载状态 -->
          <div v-if="questionsLoading" class="flex justify-center items-center py-12">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-500"></div>
            <span class="ml-3 text-gray-600">加载中...</span>
          </div>

          <!-- 题目列表 -->
          <div v-else-if="questions.length > 0" class="space-y-4">
            <div
              v-for="question in questions"
              :key="question.id"
              class="bg-white/90 backdrop-blur-sm rounded-xl border border-gray-200/50 shadow-sm hover:shadow-md transition-all duration-200"
            >
              <div class="p-6">
                <div class="flex items-start justify-between">
                  <div class="flex-1">
                    <div class="flex items-center space-x-3 mb-3">
                      <h4 class="text-lg font-semibold text-gray-900">{{ question.title }}</h4>
                      <span
                        :class="[
                          'px-2 py-1 text-xs font-medium rounded-full',
                          question.difficulty === 'Easy' ? 'bg-green-100 text-green-800' :
                          question.difficulty === 'Medium' ? 'bg-yellow-100 text-yellow-800' :
                          'bg-red-100 text-red-800'
                        ]"
                      >
                        {{ question.difficulty === 'Easy' ? '简单' : question.difficulty === 'Medium' ? '中等' : '困难' }}
                      </span>
                      <span class="px-2 py-1 bg-orange-100 text-orange-800 text-xs font-medium rounded-full">
                        待审核
                      </span>
                    </div>
                    <p class="text-gray-600 mb-4 line-clamp-2">{{ question.content }}</p>
                    <div class="flex items-center space-x-6 text-sm text-gray-500">
                      <div class="flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        {{ question.author?.username || '未知用户' }}
                      </div>
                      <div class="flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        {{ formatTime(question.created_at) }}
                      </div>
                      <div class="flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                        </svg>
                        {{ question.tags?.map((tag: any) => tag.display_name || tag.name).join(', ') || '无标签' }}
                      </div>
                    </div>
                  </div>
                  <div class="flex space-x-2 ml-4">
                    <button
                      @click="auditQuestion(question.id, 'approve')"
                      class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
                    >
                      通过
                    </button>
                    <button
                      @click="showRejectModal(question)"
                      class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
                    >
                      拒绝
                    </button>
                    <button
                      @click="viewQuestionDetail(question)"
                      class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
                    >
                      查看详情
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-else class="text-center py-12">
            <div class="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
              <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">暂无待审核题目</h3>
            <p class="text-gray-500">所有题目都已审核完成</p>
          </div>
        </div>
      </div>

      <!-- 拒绝原因模态框 -->
      <div
        v-if="showRejectReasonModal"
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
        @click="closeRejectModal"
      >
        <div
          class="bg-white rounded-2xl shadow-xl max-w-md w-full mx-4"
          @click.stop
        >
          <div class="p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">拒绝原因</h3>
            <textarea
              v-model="rejectReason"
              placeholder="请输入拒绝原因..."
              class="w-full h-32 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500/30 resize-none"
            ></textarea>
            <div class="flex justify-end space-x-3 mt-4">
              <button
                @click="closeRejectModal"
                class="px-4 py-2 text-gray-600 hover:text-gray-800 transition-colors"
              >
                取消
              </button>
              <button
                @click="confirmReject"
                class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
              >
                确认拒绝
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 题目详情模态框 -->
      <div
        v-if="showQuestionDetailModal"
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
        @click="showQuestionDetailModal = false"
      >
        <div
          class="bg-white rounded-2xl shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto"
          @click.stop
        >
          <div class="p-6">
            <div class="flex justify-between items-center mb-6">
              <h3 class="text-xl font-semibold text-gray-900">题目详情</h3>
              <button
                @click="showQuestionDetailModal = false"
                class="text-gray-400 hover:text-gray-600 transition-colors"
              >
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
              </button>
            </div>

            <div v-if="selectedQuestion" class="space-y-6">
              <!-- 基本信息 -->
              <div class="bg-gray-50 rounded-lg p-4">
                <div class="flex items-center space-x-3 mb-3">
                  <h4 class="text-lg font-semibold text-gray-900">{{ selectedQuestion.title }}</h4>
                  <span
                    :class="[
                      'px-2 py-1 text-xs font-medium rounded-full',
                      selectedQuestion.difficulty === 'Easy' ? 'bg-green-100 text-green-800' :
                      selectedQuestion.difficulty === 'Medium' ? 'bg-yellow-100 text-yellow-800' :
                      'bg-red-100 text-red-800'
                    ]"
                  >
                    {{ selectedQuestion.difficulty === 'Easy' ? '简单' : selectedQuestion.difficulty === 'Medium' ? '中等' : '困难' }}
                  </span>
                  <span class="px-2 py-1 bg-orange-100 text-orange-800 text-xs font-medium rounded-full">
                    待审核
                  </span>
                </div>
                <div class="text-sm text-gray-600">
                  <p><strong>作者：</strong>{{ selectedQuestion.author?.username || '未知用户' }}</p>
                  <p><strong>创建时间：</strong>{{ formatTime(selectedQuestion.created_at) }}</p>
                  <p><strong>标签：</strong>{{ selectedQuestion.tags?.map((tag: any) => tag.display_name || tag.name).join(', ') || '无标签' }}</p>
                </div>
              </div>

              <!-- 题目内容 -->
              <div>
                <h5 class="text-md font-semibold text-gray-900 mb-3">题目描述</h5>
                <div class="bg-white border rounded-lg p-4">
                  <div class="whitespace-pre-wrap text-gray-700">{{ selectedQuestion.content }}</div>
                </div>
              </div>

              <!-- 操作按钮 -->
              <div class="flex justify-end space-x-3 pt-4 border-t">
                <button
                  @click="showQuestionDetailModal = false"
                  class="px-4 py-2 text-gray-600 hover:text-gray-800 transition-colors"
                >
                  关闭
                </button>
                <button
                  @click="auditQuestion(selectedQuestion.id, 'approve')"
                  class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
                >
                  通过审核
                </button>
                <button
                  @click="showRejectModal(selectedQuestion)"
                  class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
                >
                  拒绝
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { adminApi } from '@/api/admin'

// 响应式数据
const activeTab = ref('projects')
const projectsLoading = ref(false)
const questionsLoading = ref(false)
const projects = ref<any[]>([])
const questions = ref<any[]>([])
const projectFilter = ref('all')
const questionFilter = ref('all')
const showRejectReasonModal = ref(false)
const rejectReason = ref('')
const currentRejectItem = ref<any>(null)
const showQuestionDetailModal = ref(false)
const selectedQuestion = ref<any>(null)

const stats = ref({
  pendingProjects: 0,
  pendingQuestions: 0,
  todayReviewed: 0,
  approvalRate: 0
})

// 标签页配置
const tabs = computed(() => [
  { id: 'projects', name: '项目审核', count: stats.value.pendingProjects },
  { id: 'questions', name: '题目审核', count: stats.value.pendingQuestions }
])

// 方法
const formatTime = (dateStr: string) => {
  const date = new Date(dateStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  if (diff < 1000 * 60) {
    return '刚刚'
  } else if (diff < 1000 * 60 * 60) {
    return `${Math.floor(diff / (1000 * 60))}分钟前`
  } else if (diff < 1000 * 60 * 60 * 24) {
    return `${Math.floor(diff / (1000 * 60 * 60))}小时前`
  } else {
    return `${Math.floor(diff / (1000 * 60 * 60 * 24))}天前`
  }
}

// 加载统计数据
const loadStats = async () => {
  try {
    const response = await adminApi.getDashboardStats()
    if (response.data) {
      stats.value = {
        pendingProjects: response.data.pendingProjects || 0,
        pendingQuestions: response.data.pendingQuestions || 0,
        todayReviewed: response.data.todayReviewed || 0,
        approvalRate: response.data.approvalRate || 0
      }
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
    // 如果获取统计数据失败，尝试直接获取待审核题目数量
    try {
      const questionsResponse = await adminApi.getPendingQuestions({ page: 1, page_size: 1 })
      if (questionsResponse.data) {
        stats.value.pendingQuestions = questionsResponse.data.total || 0
      }
    } catch (questionsError) {
      console.error('获取待审核题目数量失败:', questionsError)
    }
  }
}

// 加载项目列表
const loadProjects = async () => {
  try {
    projectsLoading.value = true
    const response = await adminApi.getPendingProjects({
      type: projectFilter.value !== 'all' ? projectFilter.value : undefined
    })
    if (response.data) {
      projects.value = response.data.projects || []
      // 更新统计数据中的待审核项目数量
      stats.value.pendingProjects = response.data.total || 0
    }
  } catch (error) {
    console.error('加载项目列表失败:', error)
  } finally {
    projectsLoading.value = false
  }
}

// 加载题目列表
const loadQuestions = async () => {
  try {
    questionsLoading.value = true
    const response = await adminApi.getPendingQuestions({
      difficulty: questionFilter.value !== 'all' ? questionFilter.value : undefined
    })
    if (response.data) {
      questions.value = response.data.questions || []
      // 更新统计数据中的待审核题目数量
      stats.value.pendingQuestions = response.data.total || 0
    }
  } catch (error) {
    console.error('加载题目列表失败:', error)
  } finally {
    questionsLoading.value = false
  }
}

// 审核项目
const auditProject = async (projectId: number, action: 'approve' | 'reject') => {
  try {
    await adminApi.auditProject(projectId, action, action === 'reject' ? rejectReason.value : undefined)
    await loadProjects()
    await loadStats()
    alert(action === 'approve' ? '项目审核通过' : '项目已拒绝')
  } catch (error) {
    console.error('审核项目失败:', error)
    alert('审核失败，请重试')
  }
}

// 审核题目
const auditQuestion = async (questionId: number, action: 'approve' | 'reject') => {
  try {
    await adminApi.auditQuestion(questionId, action, action === 'reject' ? rejectReason.value : undefined)
    await loadQuestions()
    await loadStats()
    alert(action === 'approve' ? '题目审核通过' : '题目已拒绝')
  } catch (error) {
    console.error('审核题目失败:', error)
    alert('审核失败，请重试')
  }
}

// 显示拒绝模态框
const showRejectModal = (item: any) => {
  currentRejectItem.value = item
  rejectReason.value = ''
  showRejectReasonModal.value = true
}

// 关闭拒绝模态框
const closeRejectModal = () => {
  showRejectReasonModal.value = false
  currentRejectItem.value = null
  rejectReason.value = ''
}

// 确认拒绝
const confirmReject = () => {
  if (!rejectReason.value.trim()) {
    alert('请输入拒绝原因')
    return
  }
  
  if (currentRejectItem.value) {
    if (activeTab.value === 'projects') {
      auditProject(currentRejectItem.value.id, 'reject')
    } else {
      auditQuestion(currentRejectItem.value.id, 'reject')
    }
  }
  
  closeRejectModal()
}

// 查看项目详情
const viewProjectDetail = (project: any) => {
  // 这里可以打开项目详情模态框或跳转到详情页面
  console.log('查看项目详情:', project)
}

// 查看题目详情
const viewQuestionDetail = (question: any) => {
  // 打开题目详情模态框
  showQuestionDetailModal.value = true
  selectedQuestion.value = question
}

// 监听标签页切换
const handleTabChange = () => {
  if (activeTab.value === 'projects') {
    loadProjects()
  } else if (activeTab.value === 'questions') {
    loadQuestions()
  }
}

onMounted(async () => {
  await loadStats()
  await loadProjects()
  await loadQuestions()
})
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
